<template>
  <div class="m-content">
    <div class="m-content-table">
      <Table :columns="columns" :data="levelData" :loading="loading"></Table>
    </div>
    <div class="m-content-page">
      <Page
        :total="levelLen"
        :page-size="pageSize"
        :page-size-opts="[5, 10, 15]"
        :show-sizer="true"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
      ></Page>
    </div>
    <div class="m-content-Button">
      <Button type="primary" @click="addLevel">新增</Button>
    </div>

    <AddLevel :showModal="addModal" @closeModal="showAdd = false" @reloadTable="reload"></AddLevel>

    <EditLevel :level="row" :showModal="editModal" @closeModal="showEdit = false" @reloadTable="reload"></EditLevel>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
import {columns} from './js/columns'
import AddLevel from './handleLevel/addLevel.vue'
import EditLevel from './handleLevel/editLevel.vue'

export default {
  inject: ['reload'],
  components: {
    AddLevel,
    EditLevel
  },
  data () {
    return {
      levelData: [],   // 角色权限等级数据
      levelLen: 0,   // 总数据长度
      loading: false,   // 表格是否在加载中
      page: 0,   // 传递给Modal的page
      pageSize: 5,    // 页面长度
      columns: columns(this),
      showAdd: false,   // 新增角色权限等级
      showEdit: false,   // 修改角色权限等级
      row: {}
    }
  },
  computed: {
    addModal () {
      return this.showAdd
    },
    editModal () {
      return this.showEdit
    }
  },
  mounted () {
    this._getLevel()
  },
  methods: {
    // 编辑角色权限等级
    editLevel (row) {
      this.row = row
      this.showEdit = true
    },
    // 删除角色权限等级
    deleteLevel (id) {
      this._deleteLevel(id)
      this.reload()
    },
    // 新增角色权限等级
    addLevel () {
      this.showAdd = true
    },
    // 切换页面
    changePage (page) {
      this._getLevel(page-1, this.pageSize)
    },
    // 切换页面数量
    changePageSize (pageSize) {
      this.pageSize = pageSize
      this._getLevel(0, pageSize)
    },
    // 获取角色权限等级数据
    async _getLevel (page, pageSize) {
      this.loading = true
      const url = '/getleveldata'
      let pageTemp = page || 0
      let pageSizeTemp = pageSize || 5
      const res = await this.GET_DATA({
        dataUrl: url,
        size: pageSizeTemp,
        page: pageTemp
      })
      if (res) {
        this.$nextTick(() => {
          this.levelData = res.data,
            this.levelLen = res.pageable.totalElements,
            this.loading = false
        })
      }
    },
    // 删除角色权限接口
    async _deleteLevel (id) {
      this.loading = true
      const url = '/deletelevel'
      const actionsUser = this.$store.state.userModule.user.username
      const res = await this.GET_DATA({
        dataUrl: url,
        id: id,
        actionsUser: actionsUser,
      })
      if (res) {
        res.code === '0000' && this.$Message.success('操作成功')
        this.loading = false
      }
    },
    ...mapActions({
      GET_DATA: '_GET_DATA'
    })
  }
}
</script>

<style lang="scss">
.m-content-table {
  margin-left: 20px;
  border: 1px solid #dcdee2;
}
.m-content-page {
  position: absolute;
  right: 0;
  margin-top: 10px;
}
.m-content-Button {
  margin-top: 15px;
  margin-left: 20px;
}
</style>